<template>
  <div class="notice-list">
    <div class="card">
      <el-table
        v-loading="loading"
        :data="noticeList"
        border
        stripe
      >
        <el-table-column label="消息类型" prop="msgType" align="center" />
        <el-table-column label="设备号" prop="imei" align="center" />
        <el-table-column label="告警类型" prop="alarmType" align="center" />
        <el-table-column label="告警名称" prop="alarmName" align="center" />
        <el-table-column label="纬度" prop="lat" align="center" />
        <el-table-column label="经度" prop="lon" align="center" />
        <el-table-column label="告警时间" prop="alarmTime" align="center" />
        <el-table-column label="告警地址" prop="address" align="center" />
        <el-table-column label="原因" prop="reason" align="center" />
        <el-table-column label="车辆" prop="vehicle" align="center">
          <template v-slot="{ row }">
            {{ vehicleFormat(row.vehicle) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <Pagination
          v-if="total"
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :limit="params.paginate"
          :page="params.page"
          @pagination="pagination"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getWarningNoticeList } from '@/api/gps'
import Pagination from '@/components/Pagination/index.vue'

export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      loading: false,
      noticeList: [],
      params: {
        page: 1,
        paginate: 10,
        imei: null
      },
      total: 0
    }
  },

  created() {
    this.getWarningNoticeList()
  },

  methods: {
    async getWarningNoticeList() {
      this.loading = true
      try {
        const res = await getWarningNoticeList(this.params)
        console.log('res --------->', res)
        this.noticeList = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '获取列表失败')
      } finally {
        this.loading = false
      }
    },

    vehicleFormat(info) {
      try {
        const vehicle = JSON.parse(info)
        return vehicle.license_plate_number
      } catch (error) {
        return info
      }
    },

    pagination(e) {
      this.params.page = e.page
      this.params.paginate = e.limit
      this.getWarningNoticeList()
    }
  }
}
</script>
<style lang="scss" scoped>
.notice-list{
  padding: 20px;

  .pagination {
    display: flex;
    justify-content: end;
  }

}
</style>
